<template>
  <view>
    <view class="row between">
      <view style="line-height: 40rpx;">
        <up-text type="main" size="32" :bold="true" text="销售额统计"></up-text>
      </view>
      <view style="line-height: 40rpx;">
        <up-text type="" size="32" color="#999393" text="销售详情" @click="goSellDetail"></up-text>
      </view>
    </view>
  </view>
  <view class="row">
    <view class="amountItem" style="background-color: #80D1C8">
      <up-text type="" size="28" color="#fff" text="昨日总额" align="center"></up-text>
      <up-text type="" size="28" color="#fff" wordWrap="anywhere"
        :text="`¥${storeDetail?.lastDayTotalAmount || '0.00'}`" align="center" margin="20rpx 0 0"></up-text>
    </view>
    <view class="amountItem" style="background-color: #D7000F; margin: 20rpx">
      <up-text type="" size="28" color="#fff" text="今日总额" align="center"></up-text>
      <up-text type="" size="28" color="#fff" wordWrap="anywhere" :text="`¥${storeDetail?.dayTotalAmount || '0.00'}`"
        align="center" margin="20rpx 0 0"></up-text>
    </view>
    <view class="amountItem" style="background-color: #FF770F">
      <up-text type="" size="28" color="#fff" text="当月总额" align="center"></up-text>
      <up-text type="" size="28" color="#fff" wordWrap="anywhere" :text="`¥${storeDetail?.monthTotalAmount || '0.00'}`"
        align="center" margin="20rpx 0 0"></up-text>
    </view>
  </view>
  <up-notice-bar :text="noticeList" direction="column" v-if="noticeList?.length" fontSize="24" mode="getMore"
    :url="`/pages/point/rollCall?storeId=${storeId}`"></up-notice-bar>
  <view v-if="newProductList?.length">
    <up-text type="main" size="32" :bold="true" text="新品" margin="30rpx 0"></up-text>
    <view class="row newProductItem" v-for="item in newProductList">
      <image :src="item.image" mode="scaleToFill" class="newProductImg" />
      <up-text type="main" :bold="true" aria-setsize="28" :text="item.name"></up-text>
      <view class="newProductBtn" @click="goOrderDetail(item.id)">
        <up-text type="" color="#fff" text="了解更多"></up-text>
      </view>
    </view>
  </view>
</template>

<script>
import { getNewProductList } from '@/services/product'
import { getStoreDetail } from '@/services/shop'
import { getReceiveList } from '@/services/point'
export default {
  props: {
    storeId: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      storeDetail: {},
      receiveList: [],
      newProductList: [],
    }
  },
  // watch: {
  //   storeId(id) {
  //     this.onRefresh();
  //   },
  // },
  computed: {
    noticeList() {
      const list = this.receiveList.map(({ remark }) => {
        return `${remark}`
      });
      return list;
    },
  },
  methods: {
    onRefresh() {
      const _that = this;
      return Promise.all([
        getReceiveList({ storeId: this.storeId }).then((res) => {
          const { success, data } = res || {};
          if (success) {
            console.log('getReceiveList', data);
            _that.receiveList = data;
          }
        }).finally(() => {
          Promise.resolve('getReceiveList')
        }),
        getStoreDetail({ id: this.storeId }).then((res) => {
          const { success, data } = res || {};
          if (success) {
            _that.storeDetail = data || {};
          }
        }).finally(() => {
          Promise.resolve('getReceiveList')
        }),
        getNewProductList({ storeId: this.storeId }).then((res) => {
          const { success, data } = res || {};
          if (success) {
            _that.newProductList = data || [];
          }
        }).finally(() => {
          Promise.resolve('getReceiveList')
        }),
      ])
    },
    goOrderDetail(id) {
      this.$emit('goOrderDetail', id);
    },
    goSellDetail() {
      uni.navigateTo({
        url: `/pages/sellDetail/index?storeId=${this.storeId}`,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.amountItem{
  flex: 1;
  padding: 20rpx 0;
  margin: 20rpx 0;
  border-radius: 34rpx;
}
.newProductItem {
  align-items: center;
  margin-bottom: 12rpx;
}
.newProductImg {
  height: 158rpx;
  width: 158rpx;
  margin-right: 40rpx;
  border-radius: 12rpx;
}
.newProductBtn{
  padding: 12rpx;
  border-radius: 8rpx;
  background-color: #101010;
}
</style>